<template>
  <div style="margin-left: 15px">
    <p class="shenqing">
      详细信息
      <el-button size="mini" type="warning" icon="el-icon-download" @click='exportList'>导出</el-button>
      <el-button type="primary" icon="el-icon-back" size="mini" @click="goback">返回上一页</el-button>
    </p>
    <table border="1" rules="all" class="tablestyle">
      <tr>
        <td style="width: 164px;height: 34px;text-align: center;">申请名</td>
        <td style="width: 415px; padding-left: 10px;">{{applicationData.pickName}}</td>
        <td style="width: 164px;height: 34px;text-align: center;">用途</td>
        <td style="width: 415px; padding-left: 10px;">{{applicationData.useing}}</td>
      </tr>
      <tr>
        <td style="width: 164px;height: 34px;text-align: center;">计划月份</td>
        <td style="width: 415px; padding-left: 10px;">{{applicationData.planMonth}}</td>
        <td style="width: 164px;height: 34px;text-align: center;">计划类型</td>
        <td style="width: 415px; padding-left: 10px;">
          <span v-show="applicationData.planType=='1'">月度计划</span>
          <span v-show="applicationData.planType=='2'">临时计划</span>
        </td>
      </tr>
      <tr>
        <td style="width: 164px;height: 34px;text-align: center;">备注</td>
        <td colspan="3" style="width: 1030px;padding-left: 10px">{{applicationData.note}}</td>
      </tr>
    </table>
    <el-table
      :data="tableDatajihua"
      stripe
      style="margin-left: 15px;width: 95%;margin-top: 20px"
      border
    >
      <el-table-column align="center" type="index" label="序号" width="55" prop />
      <el-table-column align="center" label="物料编码" property="mno" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column align="center" label="物料名称" property="mname"></el-table-column>
      <el-table-column align="center" label="物料规格" property="mmodel"></el-table-column>
      <el-table-column align="center" label="单位" property="unit"></el-table-column>
      <el-table-column align="center" label="计划价" property="planPrice"></el-table-column>
      <el-table-column
        align="center"
        label="技术参数"
        property="technicalParameters"
        :show-overflow-tooltip="true"
        v-if="false"
      ></el-table-column>
      <el-table-column align="center" label="需求数" property="demandNum" width="100"></el-table-column>
      <el-table-column align="center" label="利库数" property="loseNum" width="100"></el-table-column>
      <el-table-column align="center" label="库存" property="inventory"></el-table-column>
      <el-table-column align="center" label="备注" property="note"></el-table-column>
    </el-table>
  </div>
</template>
<script>
import request from "@/utils/request";
import conserveRecordDetailVue from "../../conserve/conserveRecord/conserveRecordDetail.vue";
export default {
  name: "procurementsuXQ",
  data() {
    return {
        //页码信息
        XQpage:undefined,
        XQsize:undefined,
      //参数物料id
      wlId: "",
      //物料信息
      tableDatajihua: [],
      //申请信息
      applicationData: {
        pickName: "",
        useing: "",
        planMonth: "",
        planType: "",
        note: '',
      },
      //导出参数
      dcME: {
        wzId: "",
        auditSteps: "",
      },
    };
  },
  created() {
    console.log("接受参数", this.$route.query);
    console.log(123)
    this.wlId = this.$route.query.data.id;
    this.dcME.wzId = this.$route.query.data.id;
    this.dcME.auditSteps = this.$route.query.data.auditSteps;
    console.log(this.wlId);
    this.applicationData.pickName = this.$route.query.data.pickName;
    this.applicationData.useing = this.$route.query.data.useing;
    this.applicationData.planMonth = this.$route.query.data.planMonth;
    this.applicationData.planType = this.$route.query.data.planType;
    this.applicationData.note = this.$route.query.data.note;
      // this.tableDatajihua =this.$route.query.data.wzDemandPlanInfos
      this.XQpage = this.$route.query.page
      this.XQsize = this.$route.query.size
    console.log(this.applicationData)
    this.getWLmessage();
  },
  methods: {
    //获取详情信息
    getWLmessage() {
      request({
        url: "/system/demandPlan/" + this.wlId,
        method: "get",
      }).then((response) => {
        console.log(response);
        this.tableDatajihua = response.data.wzDemandPlanInfos;
        this.applicationData.pickName = response.data.pickName;
        this.applicationData.useing =  response.data.useing;
        this.applicationData.planMonth = response.data.planMonth;
        this.applicationData.planType = response.data.planType;
        this.applicationData.note =  response.data.note;
      });
    },
    //返回
      goback () {
         this.$router.push({path:'/material/procurementSU',query:{page:this.XQpage,size:this.XQsize}});
      },
    /** 导出按钮操作 */
    exportList() {
      this.$confirm("是否确认导出?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.derive();
          console.log(456);
          // return this.download(res.data)
        })
        .catch((e) => {});
    },
    //导出
    derive() {
      console.log(this.dcME);
      request({
        url: "system/demandPlan/listByDepExport",
        method: "get",
        params: this.dcME,
      }).then((response) => {
        console.log(response);
        return this.download(response.data);
      });
    },
  },
};
</script>